<template>
  <div
    class="gotop"
    @mouseenter="startAn"
    @mouseleave="outStop"
    @click="goTop"
    :class="{ flyan: bfyl, gotopover: rock }"
    v-if="show"
  ></div>
</template>

<script>
export default {
  name: "GoTop",
  data() {
    return {
      bfyl: false,
      rock: false,
      strats: "",
      show: false,
      scrollTop: "",
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    startAn() {
      this.rock = true;
      this.strats = setInterval(() => {
        this.bfyl = true;
      }, 1999);
    },

    outStop() {
      clearInterval(this.strats);
      this.rock = false;
      this.bfyl = false;
    },

    handleScroll() {
      this.scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      if (this.scrollTop >= 280) {
        this.show = true;
      } else {
        this.show = false;
      }
    },

    goTop() {
      this.outStop();
      let goTops = setInterval(() => {
        document.documentElement.scrollTop = this.scrollTop -= 50;
        if (this.scrollTop <= 0) {
          clearInterval(goTops);
        }
      }, 10);
      console.log(1);
    },
  },
};
</script>

<style>
.gotop {
  width: 100px;
  height: 100px;
  background-image: url("../../assets/img/sprite.png");
  background-position: -100px 0px;
  background-size: auto;
  position: fixed;
  z-index: 9999999;
  right: 10%;
  bottom: 100px;
  cursor: pointer;
}

.gotopover {
  animation: rocket 2s steps(1) forwards;
}

.flyan {
  animation: fly 0.5s steps(1) infinite forwards;
}

@keyframes rocket {
  0% {
    background-position: 0 -100px;
  }
  1.65% {
    background-position: -100px -100px;
  }
  3.3% {
    background-position: -200px 0px;
  }
  4.95% {
    background-position: -200px -100px;
  }
  6.6% {
    background-position: 0px -200px;
  }
  8.25% {
    background-position: -100px -200px;
  }
  /* 0% {
    background-position: -200px -200px;
  } */
  9.9% {
    background-position: -300px 0px;
  }
  11.55% {
    background-position: -300px -100px;
  }
  13.2% {
    background-position: -300px -200px;
  }
  14.85% {
    background-position: 0px -300px;
  }
  16.5% {
    background-position: -100px -300px;
  }
  18.15% {
    background-position: -200px -300px;
  }
  19.8% {
    background-position: -300px -300px;
  }
  21.45% {
    background-position: -400px 0px;
  }
  23.1% {
    background-position: -400px -100px;
  }
  24.75% {
    background-position: -400px -200px;
  }
  26.4% {
    background-position: -400px -300px;
  }
  28.05% {
    background-position: -400px -400px;
  }
  29.7% {
    background-position: -500px 0px;
  }
  31.35% {
    background-position: -500px -100px;
  }
  33% {
    background-position: -500px -200px;
  }
  34.65% {
    background-position: -500px -300px;
  }
  36.3% {
    background-position: -500px -400px;
  }
  37.95% {
    background-position: 0px -500px;
  }
  39.6% {
    background-position: -100px -500px;
  }
  41.25% {
    background-position: -200px -500px;
  }
  42.9% {
    background-position: -300px -500px;
  }
  44.55% {
    background-position: -400px -500px;
  }
  46.2% {
    background-position: -600px 0px;
  }
  47.85% {
    background-position: -600px -100px;
  }
  49.5% {
    background-position: -600px -200px;
  }
  51.15% {
    background-position: -600px -300px;
  }
  52.8% {
    background-position: -600px -400px;
  }
  54.45% {
    background-position: -600px -500px;
  }
  56.1% {
    background-position: 0px -600px;
  }
  57.75% {
    background-position: -100px -600px;
  }
  59.4% {
    background-position: -200px -600px;
  }
  61.05% {
    background-position: -300px -600px;
  }
  62.7% {
    background-position: -400px -600px;
  }
  64.35% {
    background-position: -500px -600px;
  }
  66% {
    background-position: -600px -600px;
  }
  57.65% {
    background-position: -700px -600px;
  }
  69.3% {
    background-position: 0px -700px;
  }
  70.95% {
    background-position: -100px -700px;
  }
  72.6% {
    background-position: -200px -700px;
  }
  74.25% {
    background-position: -300px -700px;
  }
  75.9% {
    background-position: -400px -700px;
  }
  77.55% {
    background-position: -500px -700px;
  }
  79.2% {
    background-position: -600px -700px;
  }
  80.85% {
    background-position: -700px -700px;
  }
  82.5% {
    background-position: -700px -700px;
  }
  84.15% {
    background-position: -800px 0px;
  }
  85.8% {
    background-position: -800px -100px;
  }
  87.45% {
    background-position: -800px -200px;
  }
  59.1% {
    background-position: -800px -300px;
  }
  90.75% {
    background-position: -800px -400px;
  }
  92.4% {
    background-position: -800px -500px;
  }
  100% {
    background-position: -800px -500px;
  }
}

@keyframes fly {
  0% {
    background-position: 0px -700px;
  }
  6.6% {
    background-position: -100px -700px;
  }
  13.3% {
    background-position: -200px -700px;
  }
  20% {
    background-position: -300px -700px;
  }
  26.6% {
    background-position: -400px -700px;
  }
  33.3% {
    background-position: -500px -700px;
  }
  40% {
    background-position: -600px -700px;
  }
  46.6% {
    background-position: -700px -700px;
  }
  53.3% {
    background-position: -700px -700px;
  }
  60% {
    background-position: -800px 0px;
  }
  66.6% {
    background-position: -800px -100px;
  }
  73.3% {
    background-position: -800px -200px;
  }
  80% {
    background-position: -800px -300px;
  }
  86.6% {
    background-position: -800px -400px;
  }
  93.3% {
    background-position: -800px -500px;
  }
  100% {
    background-position: -800px -500px;
  }
}
</style>